<!-- 展示一些类别的一些游戏，并通过子组件BaseGameShow展示某一个类别的一些游戏 
    需要的数据：
        allGames：筛选后的所有要展示的游戏
        allGameCategory：筛选后的所有要展示的游戏的类别
        allGameSpecification：不用筛选，直接数据库查到的所有游戏规格即可
        others：一些打折信息
        gameSize：要展示的游戏数量
    -->
<template>
    <div>
        <el-row v-for="(gameCategory,index) in allGameCategory" :key="gameCategory.id"><!--主体，展示游戏类别及其游戏-->
            <transition-group appear name="animate__animated animate__bounce" :enter-active-class="showStyle[index%(showStyle.length)]">
                <div :key="gameCategory.id">
                    <el-divider></el-divider>
                    <el-col :span="6">
                        <span style="color:brown;font-style: oblique;font-size: x-large;" class="el-icon-right">
                            {{gameCategory.classesName}}
                        </span>
                        <br><br><br>
                        <el-button type="button" :disabled="gameSize>=gameshow(gameCategory.id).length" @click="showAloneGameCategory(gameshow(gameCategory.id),gameCategory)">查看更多</el-button>
                    </el-col>
                    <BaseGameShow   
                        :allGames="gameshow(gameCategory.id)" 
                        :allGameSpecification="allGameSpecification" 
                        :gameCategory="gameCategory" 
                        :others="others"
                        :gameSize="gameSize">
                    </BaseGameShow>
                </div>
            </transition-group>
        </el-row>
    </div>
</template>
<script>
import BaseGameShow from '@/components/BaseGameShow'
import 'animate.css'
export default {
    components: {BaseGameShow},
    props:['allGames','allGameCategory','allGameSpecification','others','gameSize'],
    data() {
        return {
            showStyle:[
                'animate__rollIn',
                'animate__backInLeft',
                'animate__backInRight',
            ],
        };
    },
    methods:{
        gameshow(gameCategoryId){//通过游戏类别id筛选出所有的可在客户端展示的游戏
            var showgames=[];
            this.allGames.forEach((game)=>{
                if(game.classesId===gameCategoryId){
                    showgames.push(game);
                }
            })
            return showgames;
        },
        showAloneGameCategory(gameData,gameCategoryData){//跳转到单独游戏数据页面
            this.$router.push({
                name:'aloneGameCategoryData',
                params:{
                    allGames:gameData,
                    allGameSpecification:this.allGameSpecification,
                    gameCategory:gameCategoryData,
                    others:this.others,
                    gameSize:this.gameshow(gameCategoryData.id).length,
                }
            })
        },
    }
}
</script>
<style scoped>
</style>